<template>
  <div class="Dashboard" style="height: 100%">
    <el-col :span="3" style="height: 100%">
      <el-menu class="el-menu-vertical-demo" style="text-align: left;height: 100%" theme="dark" :router="true">
        <div v-for="menu in menus">
          <el-submenu :index="menu.menuName">
            <template slot="title"><i class="el-icon-message"></i>{{ menu.menuName }}</template>
            <el-menu-item-group>
              <div v-for="child in menu.child">
                <el-menu-item index="/manageRole">{{ child.menuName }}</el-menu-item>
              </div>
            </el-menu-item-group>
          </el-submenu>
        </div>
      </el-menu>
    </el-col>
    <el-col :span="21" style="background: #E5E9F2;height: 100%;padding: 15px" >
      <transition name="el-fade-in-linear">
        <router-view></router-view>
      </transition>
    </el-col>
  </div>

</template>

<script>
  export default {
    name: 'Dashboard',
    data () {
      let user=JSON.parse(sessionStorage.getItem('user'));
      console.info(user.menus);
      return {
          apiRoot: process.env.API_ROOT,
          menus: user.menus
      }
    },
    created: function () {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
